<template>
	<view class="login" @touchmove.stop.prevent="$stopEvent()">
		<view class="login_warp">
			<div class="login_warp_p">
				<view class="lgoo_top">
					<image class="autoImg" src="/static/logo.png" mode=""></image>
				</view>
				<view class="">忘记密码</view>
				<input v-model="mobile" placeholder-style="placeStyle" class="login_input phone" placeholder="请输入手机号" maxlength="11" type="number" />
				<view class="login_input pw">
					<input v-model="smscode" placeholder-style="placeStyle" class="" placeholder="验证码" type="number" maxlength="6" />
					<view :class="msg.ifSend ? 'verCode send' :'verCode'" @click="getVercode">{{msg.message}}</view>
				</view>
				<input v-model="password" placeholder-style="placeStyle" class="login_input safe" placeholder="设置新密码" maxlength="16" type="password" />
				<input v-model="password1" placeholder-style="placeStyle" class="login_input safe" placeholder="确认密码"  maxlength="16" type="password" />

				<button class="login_btn loginIn" @click="register_btn">确定修改</button>
			</div>
			<view class="register_btn" @click="$navBack()">已有账号，直接登录</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import { baseUtils } from '../../utils/base.js';
	export default {
		data() {
			return {
				mobile:'',
				smscode:'',
				password:'',
				password1:'',

				msg:{
					message:'获取验证码',
					time:300,
					ifSend:false,
				}
			};
		},
		methods:{
			...mapMutations([
				'USER_IF_LOGIN'
			]),
			//获取验证码
			async getVercode(){
				const _=this;
				console.log(_.mobile)
				if(!baseUtils.$exp.phone.test(_.mobile)){
					return _.$showToast('请输入正确的手机号码');
				}else{
					if(!_.msg.ifSend){
						_.msg.ifSend = true;
						let res = (await _.$http('/api/unAuth/getSmsCaptcha','POST',_.mobile)).data;
						if(res && res.code == '0'){
							_.$showToast('发送成功');
							let times = setInterval(()=>{
								_.msg.message = _.msg.time+'秒';
								if(_.msg.time <= 0){
									clearInterval(times);
									_.msg.message = "获取验证码";
									_.msg.time = 300;
									_.msg.ifSend = false;
								}else{
									_.msg.time --;
								}
							},1000);
						}else{
							_.$showToast(res.msg);
							_.msg.ifSend = false;
						}
					}else{
						_.$showToast(`${_.msg.time}秒后再发送！`)
					}
				}
			},
			//注册
			register_btn(){
				const _=this;
				if(_.mobile == ''){
					return _.$showToast('请输入您的手机号码');
				}else if(!baseUtils.$exp.phone.test(_.mobile)){
					return _.$showToast('请输入正确的手机号码');
				}else if(_.smscode == ''){
					return _.$showToast('请输入您收到的验证码');
				}else if(_.password == ''){
					return _.$showToast('请输入您的密码');
				}else if(!baseUtils.$exp.pw.test(_.password)){
					return _.$showToast('请输入8-20之间非纯数字密码');
				}else if(_.password1 == ''){
					return _.$showToast('请再确认一遍您的密码');
				}else if(_.password != _.password1){
					return _.$showToast('再次输入的密码不一致');
				}
				_.register_btn_axios();
			},
			//注册ßß
			async register_btn_axios(){
				const _=this;
				let res = (await _.$http('/api/unAuth/modifyPassword','POST',{
					code:_.smscode,
					mobile:_.mobile,
					newPwd:_.password
				})).data;
				if(res && res.code == '0'){
					_.$showToast('找回成功，清重新登录！');
					_.$navTo('./login');
				}else{
					_.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		width: 100%;
		min-height: 100vh;
		background-color: $ych_color;
		@include flex_cloumn_center;

		.btn_xy{
			position: fixed;
			font-size: 28rpx;
			@include flex_center;
			width: 100%;
			bottom: 80rpx;
			color: #fff;
		}

		.login_warp{
			width: 606rpx;
			min-height: 681rpx;
			position:relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			.login_warp_p{
				box-sizing: border-box;
				position:relative;
				width: 100%;
				height: 100%;
				border-radius: 40rpx;
				padding: 90rpx 64rpx 32rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 100;
			}
			.lgoo_top{
				width: 180rpx;height: 180rpx;
				position: absolute;
				top: -120rpx;
				image{
					border-radius: 20rpx;
				}
			}
			.login_input{
				width: 100%;
				border: solid 2rpx $ych_color;
				border-radius: 40rpx;
				margin-top: 24rpx;
				height: 80rpx;
				box-sizing: border-box;
				padding: 19rpx 0 19rpx 90rpx;
				@include flex_align;
				&.phone{
					background: url('/static/ico/phone@2x.png') no-repeat 40rpx center;
					background-size: 26rpx 40rpx;
				}
				&.safe{
					background: url('/static/ico/safe@2x.png') no-repeat 40rpx center;
					background-size: 28rpx 36rpx;
				}
				&.pw{
					background: url('/static/ico/pw@3x.png') no-repeat 40rpx center;
					background-size: 28rpx 36rpx;
				}
				.verCode{
					background-color: $ych_color;
					color: #fff;
					height: 64rpx;
					font-size: 20rpx;
					width: 160rpx;
					@include flex_center;
					border-radius: 44rpx;
					margin-right: 6rpx;
				}
			}
			.login_btn{
				width: 100%;
				background-color: $ych_color;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				@include flex_center;
				border:none;
				margin-top: 56rpx;
				color: #fff;
			}
			.register_btn{
				height: 100rpx;
				width: 85%;
				background-color: #63A9FE;
				border-radius: 32rpx;
				@include flex_center;
				color: #fff;
				font-size: 30rpx;
				position: absolute;
				bottom: -100rpx;
				padding-top: 20rpx;
				z-index: 1;
			}
		}
	}
</style>
